<template>
	<u-navbar :is-back="false" :immersive="true" :background="{'no-repeat':true}">
		<view class="u-slot-right flex justify-end w-full pr-[20rpx]">
			<navigator hover-class="none" url="/pages/language/index">
				<u-icon size="50" name="/static/images/common/change_lang_w.png"></u-icon>
			</navigator>
		</view>
	</u-navbar>
	<view class="w-full h-full relative pt-[160rpx]">
		<view class="flex justify-center items-center mx-[40rpx] mb-[10rpx]">
			<u-image width="120rpx" height="120rpx" :src="appStore.getWebsiteConfig.shop_logo"></u-image>
		</view>
		<view class="text-center mb-[100rpx]">
			{{appStore.getWebsiteConfig.shop_name}}
		</view>
		<view class="bg-[#2C326B] relative rounded-lg mt-[60rpx] px-[30rpx] pt-[30rpx] pb-[30rpx] mx-[30rpx]">
			<view class="rounded-lg overflow-hidden mb-[30rpx]">
				<u-tabs :list="tabList" v-model="formData.login_way" @change="changeType" :is-scroll="false" height="80"
					:show-bar="false" bg-color="#1B1F45"
					:active-item-style="{'background-color':'#3d4277','border-radius':'5px'}"></u-tabs>
			</view>
			<u-form :label-width="150" label-position="top" :border-bottom="false">
				<u-form-item :itemStyle="{'background':'#3d4277'}" :border-bottom="false"
					v-if="formData.login_way == 1">
					<u-icon class="mr-[12rpx]" size="36" name="/static/images/login/mobile.png"></u-icon>
					<country-code :list="country_code.list" :show="picker_show" @update="handleCountryCode">
					</country-code>
					<view class="mr-[20rpx]" @click="picker_show=true">
						<text class="mr-[12rpx]">{{formData.country_code}}
						</text>
						<u-icon size="20" name="/static/images/common/arrow_down.png"></u-icon>
					</view>
					<u-input class="flex-1" v-model="formData.account" type="number" :border="false"
						:placeholder="t('login.mobile')" />
				</u-form-item>
				<u-form-item :border-bottom="false" :itemStyle="{'background':'#3d4277'}"
					v-if="formData.login_way == 0">
					<u-icon class="mr-[12rpx]" size="36" name="/static/images/login/email.png"></u-icon>
					<u-input type="email" v-model="formData.account" :placeholder="t('login.email')" :border="false" />
				</u-form-item>
				<u-form-item :border-bottom="false" :itemStyle="{'background':'#3d4277'}">
					<u-icon class="mr-[12rpx]" size="36" name="/static/images/login/pwd.png"></u-icon>
					<u-input type="password" v-model="formData.password" :placeholder="t('login.password')"
						:border="false" />
				</u-form-item>
				<u-form-item :border-bottom="false" :itemStyle="{'background':'#3d4277'}">
					<u-icon class="mr-[12rpx]" size="36" name="/static/images/login/invite_code.png"></u-icon>
					<u-input type="number" v-model="formData.invite_code" :placeholder="t('login.inviteCode')"
						:border="false" />
				</u-form-item>
			</u-form>

			<view class="mt-[60rpx]">
				<u-button type="primary"
					:disabled="formData.account==''|| formData.password==''|| (isInviteCode&& formData.invite_code=='')"
					@click="accountRegister"> {{t('login.registerBtn')}}
				</u-button>
			</view>
		</view>

		<view class="flex justify-center mt-[30rpx] ">
			{{t('login.loginNowTips')}}
			<navigator class="text-[#00D2E0] ml-[10rpx]" hover-class="none" url="/pages/login/login">
				{{t('login.loginNow')}}
			</navigator>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { register } from '@/api/account'
	import { reactive, computed, ref } from 'vue'
	import { getCountryCode } from '@/api/app'
	import { useAppStore } from '@/stores/app'
	import { useUserStore } from '@/stores/user'
	import { t, isEmpty, jumpTo } from '@/utils/util'

	uni.setNavigationBarTitle({ title: t('login.register') })
	const appStore = useAppStore()
	const userStore = useUserStore()
	const isInviteCode = computed(() => appStore.getLoginConfig.invite_code == 1)

	const picker_show = ref(false)

	const tabList = ref([
		{
			name: t('login.tab1'),
		},
		{
			name: t('login.tab2'),
		}
	])

	const country_code = reactive<{
		list : any[]
		default_select : number
	}>({
		list: [],
		default_select: 0
	})

	const formData = reactive({
		login_way: 0,
		country_code: '',
		account: '',
		password: '',
		invite_code: '',
	})

	const getData = async () => {
		let data = appStore.getLoginConfig.region_code
		if (isEmpty(data)) data = await getCountryCode()
		country_code.list = data;
		formData.country_code = data[0]['code']
	}

	const changeType = () => {
		formData.account = ''
	}

	const handleCountryCode = (data : any) => {
		picker_show.value = data['show']
		if (data['code'] != '') {
			formData.country_code = data['code'];
		}
	}

	const accountRegister = async () => {
		uni.showLoading({})
		try {
			const data = await register(formData)
			loginHandle(data)
		} catch (error : any) {
			uni.hideLoading()
			uni.$u.toast(error)
		}
	}

	const loginHandle = async (data : any) => {
		userStore.login(data.token)
		uni.$u.toast(t('network.registerSuccessfully'))
		uni.hideLoading()
		uni.reLaunch({
			url: '/pages/index/index'
		})
	}

	onLoad((options : any) => {
		getData()
		if (!isEmpty(options.code)) formData.invite_code = options.code
	})
</script>

<style lang="scss">
</style>